<template>
  <div class="userBar">
    <div class="login_box">
      <h3>我要帮助/求助</h3>
      <div class="me-login-box me-login-box-radius">
        <el-form ref="userForm" :model="userForm" :rules="rules">
          <el-form-item prop="studentId">
            <el-input placeholder="学号" v-model="userForm.studentId"></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input placeholder="密码" type="password" v-model="userForm.password"></el-input>
          </el-form-item>

          <el-form-item size="small" class="me-login-button">
            <el-button type="primary" @click.native.prevent="login('userForm')" >登录</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
    </div>
</template>

<script>
export default {
  name: "UserBAr",
  data() {
    return {
      fullscreenLoading: false,
      userForm: {
        studentId: '',
        password: ''
      },
      rules: {
        studentId: [
          {required: true, message: '请输入学号', trigger: 'blur'},
          {max: 21, message: '不能大于21个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {max: 21, message: '不能大于21个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    login(formName) {
      let that = this

      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '登录中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          that.$store.dispatch('ReqLogin', that.userForm).then(async () => {
            await this.$store.dispatch("ReqUserInfo")
            // 开启webSocket
            await this.$store.dispatch('WebSocketComm');
            let goPath = this.$route.query.redirect || '/home';
            //跳转到首页
            this.$router.push(goPath);
            loading.close();
            that.$message({message: '登陆成功', type: 'success', showClose: true});
          }).catch((error) => {
            if (error !== 'error') {
              that.$message({message: error.data.error_description, type: 'error', showClose: true});
              loading.close();
            }
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>

.userBar {
  margin-top: 10px;
  border-radius: 20px;
  float: right;
  width: 296px;
  height: 450px;
  /* background-color: red; */
}
.login_box {
  margin-top: 10px;
  border-radius: 20px;
  padding: 30px;
  background-color: #FFCCCC;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.login_box h3 {
  padding: 0 0 24px 0;
  text-align: center;
  color: #fff;
  font-size: 18px;
}
.login_box button {
  background-color: #fff;
  color: #00c2b3;
  font-size: 16px;
  height: 42px;
  line-height: 42px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: .9;
}

.login_box button:hover {
  opacity: 1;
}

</style>
